<template>
    <a-layout class="Layout">
        <a-layout-sider theme="light" :width="left" :style="{
            borderRight: '1px solid ' + token.colorBorderSecondary
        }">
            <slot name="Menu"></slot>
        </a-layout-sider>
        <a-layout>
            <a-layout-header class="Header" :style="{
                backgroundColor: token.colorBgContainer,
                borderBottom: '1px solid ' + token.colorBorderSecondary,
            }">
                <slot name="Tools"></slot>
            </a-layout-header>
            <a-layout-content class="ContentBox" :style="{ padding: token.paddingXS + 'px' }">
                <div class="ContentFixed">
                    <div class="Content" id="BoardStop"
                        :style="{ boxShadow: token.boxShadowSecondary, background: token.colorBgContainer }"
                        @scroll="RefreshActiveBoard">
                        <slot name="Content"></slot>
                    </div>
                </div>
                <div class="Active">
                    <slot name="Active"></slot>
                </div>
            </a-layout-content>
        </a-layout>

        <div class="LayoutMoveBar" :class="{ state: State }" @mousedown="StarDragMoveBar"
            :style="{ right: right - 3 + 'px' }">
            <div class="BarColor" :style="{ background: token.colorBorder }"></div>
        </div>

        <a-layout-sider theme="light" class="No-transition" :width="right" :style="{
            borderLeft: '1px solid ' + token.colorBorderSecondary
        }">
            <slot name="Options"></slot>
        </a-layout-sider>
    </a-layout>
</template>

<script setup>
import { ref, inject, onMounted, nextTick } from 'vue';
import { theme } from 'ant-design-vue';
import { GetRules } from '../Event/GetRules.js'

const { token } = theme.useToken();
const props = defineProps(['left']);

const State = ref(false);
const right = ref(320);

const MouseUp = function () {
    State.value = false;
    window.removeEventListener('mousemove', MouseEvent, true);
    window.removeEventListener('mouseup', MouseUp, true);
}

const MouseEvent = function (event) {
    const x = event.pageX;
    const width = document.body.clientWidth;
    const _R = width - x;
    if (_R < 260) {
        right.value = 260;
    } else if (_R > 500) {
        right.value = 500;
    } else {
        right.value = _R;
    };
    nextTick(() => {
        RefreshActiveBoard();
    })
};

const StarDragMoveBar = function (event) {
    State.value = true;
    window.addEventListener('mousemove', MouseEvent, true);
    window.addEventListener('mouseup', MouseUp, true);
};

const AppRunEvent = inject('AppRunEvent');
const StateEvent = inject('StateEvent');

const RefreshActiveBoard = () => {
    StateEvent.RefreshActiveBoard();
}

onMounted(() => {
    AppRunEvent('VisualEditor-Core.Runing');
    GetRules().then(res => {
        StateEvent.SetRule(res);
        AppRunEvent('VisualEditor-Core.CellLoadEnd');
    });
})



</script>

<style lang="less" scoped>
.Active {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.Header {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}


.ContentBox {
    position: relative;

    .ContentFixed {
        transform: scale(1);
        width: 100%;
        height: 100%;
        overflow: hidden;

        .Content {
            width: 100%;
            margin: 0 auto;
            height: 100%;
            overflow-y: auto;
            user-select: none;
            position: relative;

        }
    }
}

.Layout {
    position: relative;
    height: 100%;
}

.No-transition {
    transition: none;
}

.LayoutMoveBar {
    width: 5px;
    height: 100%;
    position: absolute;
    right: 320px;
    top: 0;
    cursor: e-resize;
    z-index: 10;

    .BarColor {
        width: 100%;
        height: 100%;
        display: none;
    }

    &:hover {
        .BarColor {
            display: block;
        }
    }

    &.state {
        .BarColor {
            display: block;
        }
    }
}
</style>